<template>
  <view class="my-container">
    <view class="my-info">
      <!-- 用于控制ios的安全区域 -->
      <!-- <image src="@/static/images/bg.png" mode="scaleToFill" /> -->
      <view class="user-info">
        <image class="avator" src="@/static/images/defAvator.png" mode="scaleToFill" />
        <view class="text-info">
          <text class="my-name">微信用户</text>
          <button class="btn-phone" open-type="getPhoneNumber" @getphonenumber="handleQuickLogin">
            电话：未绑定
          </button>
          <text class="my-phone">电话：</text>
        </view>
      </view>
    </view>
    <view class="my">
      <!-- 我的订单 -->
      <view class="order-info">
        <view class="order-head">
          <text class="head-left">我的订单</text>
          <view class="head-right" @tap="goMyOrder">
            <text class="head-text">查看全部订单</text>
            <text class="t-icon t-icon-jinru icon-size"></text>
          </view>
        </view>
        <view class="order-main">
          <view
            class="order-item"
            v-for="(item, index) in orderItemArr"
            :key="index"
            @click="goOneOrder(index)"
          >
            <text :class="['t-icon', 'special-size', item.icon]"></text>
            <text class="text-size">{{ item.text }}</text>
          </view>
        </view>
      </view>

      <!-- 我的服务 -->
      <view class="my-service">
        <view class="service-header">
          <text class="service-text">我的服务</text>
        </view>
        <view class="service-main">
          <view class="service-item" v-for="(item, index) in serviceItemArr" :key="index">
            <view class="item-box" @tap="goPage(index)">
              <text :class="['t-icon', item.icon]"></text>
              <text class="item-text">{{ item.text }}</text>
            </view>
          </view>
          <view class="service-item">
            <view class="item-box">
              <text class="t-icon t-icon-weixin special-weixin"></text>
              <button class="wechatButton" open-type="contact">微信客服</button>
            </view>
          </view>
        </view>
      </view>
      <!-- 拓展信息 -->
      <view class="other-info">
        <view class="other-main">
          <view class="other-main-item">
            <view class="item-left">
              <text class="t-icon t-icon-morendizhi item-right-size"></text>
              <text class="item-text">常见问题</text>
            </view>
            <text class="t-icon t-icon-jinru item-right-size"></text>
          </view>
          <view class="other-main-item">
            <view class="item-left">
              <text class="t-icon t-icon-morendizhi item-right-size"></text>
              <text class="item-text">常见问题</text>
            </view>
            <text class="t-icon t-icon-jinru item-right-size"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 底部tabbar的内容 -->
  <Custom-tab-bar :currentPage="2"> </Custom-tab-bar>
</template>

<script lang="ts" setup>
// import { useGlobalStore } from '@/stores/modules'
import { onShow } from '@dcloudio/uni-app'
import type { ButtonOnGetphonenumberEvent } from '@uni-helper/uni-app-types/index'
// import type { UniStepsOption } from '@uni-helper/uni-ui-types'
import { ref } from 'vue'
const statusbarHeight = ref(0) //顶部开始按钮
const deviceName = ref('') //设备名称
// const { globalData } = useGlobalStore()
// 跳转到具体订单
const goOneOrder = (index: number) => {
  uni.navigateTo({
    url: `/pkg/myOrder/index?index=${index + 1}`,
  })
}

// 服务点击事件
const goPage = (index: number) => {
  switch (index) {
    case 1:
      uni.navigateTo({
        url: '/pkg/contract/index',
      })
      break
    case 3:
      uni.makePhoneCall({
        phoneNumber: '400-858-2233', //仅为示例
      })
      break
    case 4:
      uni.navigateTo({
        url: '/pkg/address/index',
      })
      break
  }
}

const serviceItemArr = [
  { text: '我的积分', icon: 't-icon-wode-wodejifen' },
  { text: '家政合同', icon: 't-icon-yiqianhetong-copy' },
  { text: '绑定手机', icon: 't-icon-bangdingshouji' },
  { text: '客服中心', icon: 't-icon-kefuzhongxin' },
  { text: '默认地址', icon: 't-icon-morendizhi' },
]

onShow(() => {
  // uni.getSystemInfoSync().osName == 'ios'
  deviceName.value = uni.getSystemInfoSync().osName
  if (deviceName.value === 'ios') {
    statusbarHeight.value = uni.getSystemInfoSync().safeAreaInsets?.top as number
  }
})
const orderItemArr = [
  { text: '待付款', icon: 't-icon-daizhifu' },
  { text: '已完成', icon: 't-icon-yiwancheng' },
  { text: '已取消', icon: 't-icon-yiquxiao' },
  { text: '待评价', icon: 't-icon-daipingjia' },
]

// 跳转到订单页面
const goMyOrder = () => {
  uni.navigateTo({
    url: '/pkg/myOrder/index',
  })
}

// 获取手机号
const handleQuickLogin = async (event: ButtonOnGetphonenumberEvent) => {
  const pages = getCurrentPages()
  const { code, encryptedData, iv } = event.detail
  const params = {
    code: code!,
    encryptedData: encryptedData!,
    iv: iv!,
    // sessionCode: globalState.loginCode,
  }
  // 将加密参数与登录的code一起上传到后端解密，后端返回用户信息
  console.log(params)
  uni.showLoading({ title: '登录中' })
  // const res = await login(params)
  // console.log(res)
  uni.hideLoading()
  // 刷新页面
  uni.reLaunch({ url: '/' + pages[pages.length - 1].route })
  // 手动触发无法显示tabbar问题
}
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
